<template>
   <header>
     <div class="header-head">
           <span class="iconfont">&#xe618;</span>
     </div>
     <div class="header-search">
           <span class="iconfont">&#xe633;</span>
           <span>输入城市/景点/游玩主题</span>
     </div>
     <router-link to="city" tag="div" class="header-city">
           {{$store.state.changs}}
           <span class="iconfont">&#xe6aa;</span>
     </router-link>
   </header>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped="scoped">/* scoped 仅在当前使用组件 */
  @import '~@/assets/css/variable.styl'
     header
      width 100%
      background $bgcolor
      height $height
      line-height $height
      display flex
      align-content center
      align-items center
      color white
      .header-head
         width 0.8rem
         text-align center
      .header-search
         flex 1
         background #FFFFFF
         height 0.6rem
         line-height 0.6rem
         margin 0.14rem 0
         padding-left 0.2rem
         border-radius 0.06rem
         color #e4e7ea
      .header-city
         padding 0 0.22rem
</style>
